<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/1/4 0004
  Time: 上午 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>实体办税厅窗口满意度分析</title>
</head>
<body>
    <div class="content-wrapper">
        <h3>实体办税厅窗口满意度分析</h3>
        <div class="row">
            <div class="panel widget col-sm-4">
                <div class="row row-table">
                    <div class="row row-table bg-green">
                        <div class="col-xs-3 text-center bg-green-dark  pv-lg">
                            <em class="icon-emoticon-smile fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">92%</div>
                            <div class="text-uppercase">实体办税厅窗口满意率</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">5人
                                    </div>
                                    <div style="font-size: 10px;">排队人数</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">3分钟
                                    </div>
                                    <div style="font-size: 10px;">平均等待时长</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart1" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">

                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart2" style="height: 420px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart3" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart4" style="height: 420px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>


<script>




    //chart1
    var chartOption1 = {
        title : {
            text: '本月服务人次数量分城市统计',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',
                axisLabel: { //横坐标60°倾斜
                    rotate: 60
                },
                data : ['南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城', '扬州', '镇江', '宿迁', '常州']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本月服务人次',
                type:'bar',
                data:[
                    {
                        value:200,
                        itemStyle:{
                            //normal:{color:'gray'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:250,
                        itemStyle:{
                            //normal:{color:'#E6E61A'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:280,
                        itemStyle:{
                            //normal:{color:'#8DC43C'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:390,
                        itemStyle:{
                            //normal:{color:'#22DDDD'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:500,
                        itemStyle:{
                            //normal:{color:'#827788'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:600,
                        itemStyle:{
                            //normal:{color:'#D5912B'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:400,
                        itemStyle:{
                            //normal:{color:'#EE11EE'} //为每个柱设置颜色
                        }
                    },{
                        value:540,
                        itemStyle:{
                            //normal:{color:'black'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:480,
                        itemStyle:{
                            //normal:{color:'blue'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:390,
                        itemStyle:{
                            //normal:{color:'pink'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:540,
                        itemStyle:{
                            //normal:{color:'red'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:435,
                        itemStyle:{
                            //normal:{color:'yellow'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:330,
                        itemStyle:{
                            //normal:{color:'green'} //为每个柱设置颜色
                        }
                    }

                ],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5 ,//设置柱状圆角
                        color:'#A3E492' //全局柱状颜色
                    }
                }
            }
        ]
    };

    //chart2

    var chartOption2 = {
        title : {
            text: '本月办理业务数量分城市统计',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',
                axisLabel: { //横坐标60°倾斜
                    rotate: 60
                },
                data : ['南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城', '扬州', '镇江', '宿迁', '常州']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本月办理业务数量',
                type:'bar',
                data:[
                    {
                        value:230,
                        itemStyle:{
                            //normal:{color:'gray'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:350,
                        itemStyle:{
                            //normal:{color:'#E6E61A'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:380,
                        itemStyle:{
                            //normal:{color:'#8DC43C'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:490,
                        itemStyle:{
                            //normal:{color:'#22DDDD'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:540,
                        itemStyle:{
                            //normal:{color:'#827788'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:600,
                        itemStyle:{
                            //normal:{color:'#D5912B'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:420,
                        itemStyle:{
                            //normal:{color:'#EE11EE'} //为每个柱设置颜色
                        }
                    },{
                        value:640,
                        itemStyle:{
                            //normal:{color:'black'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:490,
                        itemStyle:{
                            //normal:{color:'blue'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:410,
                        itemStyle:{
                            //normal:{color:'pink'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:620,
                        itemStyle:{
                            //normal:{color:'red'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:335,
                        itemStyle:{
                            //normal:{color:'yellow'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:430,
                        itemStyle:{
                            //normal:{color:'green'} //为每个柱设置颜色
                        }
                    }

                ],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5, //设置柱状圆角
                        color:'#E4A392' //全局柱状颜色
                    }
                }
            }
        ]
    };


    //chart3

    var chartOption3 = {
        title : {
            text: '本月平均等待时间分城市统计',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',
                axisLabel: { //横坐标60°倾斜
                    rotate: 60
                },
                data : ['南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城', '扬州', '镇江', '宿迁', '常州']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本月平均等待时间',
                type:'bar',
                data:[
                    {
                        value:10,
                        itemStyle:{
                            //normal:{color:'gray'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:21,
                        itemStyle:{
                            //normal:{color:'#E6E61A'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:15,
                        itemStyle:{
                            //normal:{color:'#8DC43C'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:19,
                        itemStyle:{
                            //normal:{color:'#22DDDD'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:20,
                        itemStyle:{
                            //normal:{color:'#827788'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:13,
                        itemStyle:{
                            //normal:{color:'#D5912B'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:15,
                        itemStyle:{
                            //normal:{color:'#EE11EE'} //为每个柱设置颜色
                        }
                    },{
                        value:19,
                        itemStyle:{
                            //normal:{color:'black'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:5,
                        itemStyle:{
                            //normal:{color:'blue'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:8,
                        itemStyle:{
                            //normal:{color:'pink'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:3,
                        itemStyle:{
                            //normal:{color:'red'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:12,
                        itemStyle:{
                            //normal:{color:'yellow'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:9,
                        itemStyle:{
                            //normal:{color:'green'} //为每个柱设置颜色
                        }
                    }

                ],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5, //设置柱状圆角
                        color:'#B6A4D2' //全局柱状颜色
                    }
                }
            }
        ]
    };

    //chart4

    var chartOption4 = {
        title : {
            text: '本月满意度分城市统计',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',
                axisLabel: { //横坐标60°倾斜
                    rotate: 60
                },
                data : ['南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城', '扬州', '镇江', '宿迁', '常州']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本月满意度',
                type:'bar',
                data:[
                    {
                        value:400,
                        itemStyle:{
                            //normal:{color:'gray'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:270,
                        itemStyle:{
                            //normal:{color:'#E6E61A'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:320,
                        itemStyle:{
                            //normal:{color:'#8DC43C'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:300,
                        itemStyle:{
                            //normal:{color:'#22DDDD'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:370,
                        itemStyle:{
                            //normal:{color:'#827788'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:630,
                        itemStyle:{
                            //normal:{color:'#D5912B'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:420,
                        itemStyle:{
                            //normal:{color:'#EE11EE'} //为每个柱设置颜色
                        }
                    },{
                        value:640,
                        itemStyle:{
                            //normal:{color:'black'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:380,
                        itemStyle:{
                            //normal:{color:'blue'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:490,
                        itemStyle:{
                            //normal:{color:'pink'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:640,
                        itemStyle:{
                            //normal:{color:'red'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:335,
                        itemStyle:{
                            //normal:{color:'yellow'} //为每个柱设置颜色
                        }
                    },
                    {
                        value:390,
                        itemStyle:{
                            //normal:{color:'green'} //为每个柱设置颜色
                        }
                    }

                ],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5, //设置柱状圆角
                        color:'#92B3E4' //全局柱状颜色
                    }
                }
            }
        ]
    };









     require.config({
         paths: {
             echarts: '${ctx}/assets/echarts/build/dist'
         }
     });
     require(
             [
                 'echarts',
                 'echarts/chart/bar',
                 'echarts/chart/scatter',
                 'echarts/chart/pie',
                 'echarts/chart/map',
                 'echarts/chart/tree',
                 'echarts/chart/funnel',
                 'echarts/chart/gauge',
                 'echarts/chart/wordCloud'

             ],
             function (ec) {
                 //江苏省税务业务办理事项统计


                 var chart1 = ec.init(document.getElementById('chart1'));
                 chart1.setOption(chartOption1, true);


                 var chart2 = ec.init(document.getElementById('chart2'));
                 chart2.setOption(chartOption2, true);

                 var chart3 = ec.init(document.getElementById('chart3'));
                 chart3.setOption(chartOption3, true);

                 var chart4 = ec.init(document.getElementById('chart4'));
                 chart4.setOption(chartOption4, true);



             }
     )







</script>
</body>
</html>
